<template>
    <div id="apo">
        <div>
            <ul class="header">
                <li><img src="https://edu-image.nosdn.127.net/7c5a8d29-ce20-4f97-a3a6-49872772667d.png?imageView&quality=100&thumbnail=100y100" alt=""></li>
               <router-link to="/rename">登录/注册</router-link>
                <li><img src="../../../static/images/account/right.png"/></li>
            </ul>
        </div>
        <div class="vip"><img src="../../../static/images/account/vip.png" alt="我是一个图标"><span>开通VIP会员</span><span></span></div>
        <div>
            <ul class="particulars">
                <li><img src="../../../static/images/account/order_form.png" alt="我是一个图标"><router-link class="particulars_part" to="/order_form">我的订单<img src="../../../static/images/account/right.png"/></router-link></li>
                <li><img src="../../../static/images/account/roll.png" alt="我是一个图标"><router-link class="particulars_part" to="/coupon">我的优惠劵<img src="../../../static/images/account/right.png"/></router-link></li>
                <li><img src="../../../static/images/account/shop.png" alt="我是一个图标"><router-link class="particulars_part" to="/shopping">我的购物车<img src="../../../static/images/account/right.png"/></router-link></li>
                <li><img src="../../../static/images/account/cal.png" alt="我是一个图标"><router-link class="particulars_part study" to="/shopping">我的学习卡<img src="../../../static/images/account/right.png"/></router-link></li>
            </ul>
            <ul class="share">
                <li><img src="../../../static/images/account/horn.png" alt="我是一个图标"><router-link class="particulars_part" to="/shopping">分享赚学费<img src="../../../static/images/account/right.png"/></router-link></li>
            </ul>
        </div>
    </div>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
                list:{}
            }
		},
        created(){
            this.list = JSON.parse(sessionStorage.getItem("data"));
            // console.log(this.list);
            // console.log(JSON.parse(sessionStorage.getItem("data")))
        },
		methods: {

		}
	}
</script>

<style scoped>
    #apo{padding-bottom: 50px;background-color: white;height: 100%}
    .header{
        font-size:13px;
        color: #333740;
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style-type:none;
        padding:14px 0 0 14px;
        margin:0;
    }
    .particulars{
        list-style-type:none;
        padding-left:10px
    }

    .header img{
        width: 44px;
        height:44px;
        margin-right: 14px;
    }

    a{
        color: #333740;
    }
    /*会员*/
    .vip{
        color:white;
        font-size:14px;
        background:#FF7544;
        background-image: linear-gradient(-225deg, #FF2D3D 0%, #FF7544 100%);
        display: flex;
        padding-left:10px;
        align-items: center;
    }
    .vip span:nth-child(1){
        order:2;
    }
    .vip img{
        width: 14px;
        height: 10px;
        margin-right:14px;
    }
    /*详情*/
    .particulars{
        border-bottom:5px solid gainsboro;
        margin-bottom: 0;
    }
    .share{
        margin: 0;
        padding-left:10px;
    }
    .particulars img,.share img{
        width: 14px;
        height: 14px;
        margin-right:14px;
    }
    .particulars li,.share li{
        display:flex;
        align-items: center;
        width:100%;
        font-size: 0.8rem;

    }
    .particulars_part{
        flex-grow:2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0.6rem 0;
        border-bottom:1px solid gainsboro;
    }
    .study{
        border:none;
    }
    /*分享赚钱费*/
    .share .particulars_part{
        border:0;
    }

</style>
